<!DOCTYPE html>
<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE,NO-STORE" />
<meta http-equiv="PRAGMA" content="NO-CACHE" />
<meta http-equiv="EXPIRES" content="-1">
<title>Pulse</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />

<!-- fix IE Ui issues-->
<!--[if IE 7]>
                <link href="css/ie/ie7.css" type="text/css" rel="stylesheet"/>
         <![endif]-->
<!--[if IE 8]>
                <link href="css/ie/ie8.css" type="text/css" rel="stylesheet"/>
         <![endif]-->
<!--[if IE 9]>
                <link href="css/ie/ie9.css" type="text/css" rel="stylesheet"/>
         <![endif]-->
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
        <script src='scripts/lib/html5.js'></script>
        <script type="text/javascript" src="scripts/lib/excanvas.js"></script>
        <script type="text/javascript"> if (!window.console) console = {log: function() {}}; </script>
                <![endif]-->

<script type="text/javascript" src='scripts/lib/jquery-1.7.2.js'></script>
<script type="text/javascript" src='scripts/lib/common.js'></script>
<script type="text/javascript"
	src="scripts/lib/jquery.i18n.properties.js"></script>
<!--Custom Scroll Bar-->
<!-- styles needed by jScrollPane - include in your own sites -->
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet"
	media="all" />
<!-- the mousewheel plugin -->
<script type="text/javascript" src="scripts/lib/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="scripts/lib/jquery.jscrollpane.js"></script>
<!--Place Holder tag-->
	<script type="text/javascript" src="scripts/lib/jquery.placeholder.js"></script>
<!-- Rgraph and TreeMap-->
<link type="text/css" href="css/base.css" rel="stylesheet" />
<link type="text/css" href="css/Treemap.css" rel="stylesheet" />
<script type="text/javascript" src="scripts/lib/jit.js"></script>
<script type="text/javascript" src="scripts/lib/jquery.sparkline.js"></script>

<!-- Grid view CSS and js-->
<link rel="stylesheet" type="text/css" media="screen"
	href="css/grid/ui.jqgrid.css" />
<script src="scripts/lib/grid.locale-en.js" type="text/javascript"></script>
<script src="scripts/lib/jquery.jqGrid.src.js" type="text/javascript"></script>
<script src="scripts/lib/jquery.tablednd.js" type="text/javascript"></script>
<!-- -->
<!-- jQuery plugin to support automatically updating fuzzy timestamps 
(e.g. "4 minutes ago" or "about 1 day ago") -->
<script type="text/javascript" src="scripts/lib/jquery.timeago.js"></script>

<!-- start:Cluster widget based js files -->
<script type="text/javascript"
	src="scripts/pulsescript/PulseCallbacks.js"></script>
<script type="text/javascript"
	src="scripts/pulsescript/PulseFunctions.js"></script>
<script type="text/javascript" src='scripts/pulsescript/common.js'></script>
<script type="text/javascript"
	src='scripts/pulsescript/queryStatistics.js'></script>

<!-- multiselect -->
<link rel="stylesheet" type="text/css"
	href="css/multiselect/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="css/multiselect/style.css" />
<link rel="stylesheet" type="text/css"
	href="css/multiselect/prettify.css" />
<script type="text/javascript"
	src="scripts/multiselect/jquery-ui.js"></script>
<script type="text/javascript"
	src="scripts/multiselect/jquery.multiselect.js"></script>
<script type="text/javascript" src="scripts/multiselect/prettify.js"></script>
<script type="text/javascript" src="scripts/lib/checkBox-RadioButton.js"></script>
<!-- multiselect -->
</head>

<body>
	<!-- Connection lost-->
	<div class="connectionLostMasterBlock hide" id="connectionStatusDiv">
		<div class="connectionLostInnerBlock">
			<label class="left">Connecting ...</label>
			<div class="clear"></div>
			<div id="connectionErrorMsgDiv" class="right"></div>
		</div>
	</div>

	<div id="canvasWidth">
		<!--Top Links-->
		<div class="headerTopLinksMaster">
			<div class="right">
				<div class="left position-relative">
					<a href="#." class="left headerTopLinks aboutClicked-Off">About</a>
					<!-- About Dropdown-->
					<div id="detailsAbout" class="aboutBlock display-none">
						<div class="aboutDetailsBlock">
							<div class="left widthfull-100per marginBottom30">
								<div class="left">
									<img data-prod-custom="pulse-aboutimg-custom"
										src="images/about-geode.png">
									<div>
										<div class="aboutVersionBlock left" id="pulseVersion"></div>
										<div class="left termsBlock">
											&nbsp;<a id="pulseVersionDetailsLink" href="#dialog1"
												class="display-none">Version Details</a>
										</div>
									</div>
								</div>
								<div data-prod-custom="pulse-about-custom"
									class="right aboutText">The Pulse tool monitors
									Pivotal&#0153; GemFire&#0169; system in real time. It provides
									health information, detailed operational and configuration
									data, system alerts, throughput performance and statistics for
									system members and connected clients.</div>
							</div>
							<div class="left widthfull-100per copyright">
								<p>Apache Geode (incubating)<br>
									Copyright 2016 The Apache Software Foundation.</p>
								<p>&nbsp;</p>
								<p>This product includes software developed at
									The Apache Software Foundation (http://www.apache.org/).</p>
							</div>
						</div>
					</div>
				</div>
				<div class="left headerTopSeperator"></div>
				<div class="left">
					<a data-prod-custom="pulse-help-custom" target="_blank"
						href="http://geode.docs.pivotal.io/docs/tools_modules/pulse/chapter_overview.html"
						class="left headerTopLinks">Help</a>
				</div>
				<div class="left headerTopSeperator"></div>
				<div class="left headerTopLinks welcomeLabelPRZero">Welcome</div>
				<div class="left headerTopLinks textbold font-size12" id="userName"></div>
				<div class="left headerTopSeperator"></div>
				<div class="left">
					<a href="pulse/clusterLogout" class="left headerTopLinks">Sign
						Out</a>
				</div>
			</div>
		</div>
		<!-- Header block-->
		<header>
			<div class="left">
				<a href="#." onclick="openClusterDetail();"
					class="left textbold HeaderLink HeaderLinkActive" id="clusterName"></a>
			</div>
			<div class="textbold right logoBlock">
				<img src="images/apache_geode_logo.png"/><a href="#.">[LOGO]</a>
			</div>
		</header>
		<div class="clear"></div>
		<div class="subHeader">
			<ul>
				<li><a href="#." onclick="openClusterDetail();">Cluster
						View</a></li>
				<!-- Hide Data Browser tab for gemfirexd (Pulse-Cheetah Release) -->
				<!-- <li><a href="#."  onclick="openDataBrowser();">Data Browser</a></li> -->
				<li><a href="#." onclick="openQueryStatistics();" class="active">Query Statistics</a></li>
			</ul>
			<div class="clear"></div>
		</div>
		<!-- Middle block-->
		<div class="left widthfull-100per">
			<!--Top Right Block 1-->
			<div class="right widthfull-100per marginTB10">

				<!-- Tab-->
				<div id="notificationsPanel" class="right marginL10 TabTopPanel position-relative"
					data-role="widget" data-widgetid="CluserAlertNotification" data-active="yes" data-timeline="5000">
				</div>
				<div class="left leftBlockCanvas">
					<!-- to be replaced with grid -->
					<!-- canvasBlockLarge -->
					<div class="statusmasterBlock">
						<div
							class="left widthfull-100per canvasBlockInnerBlock backgroundQueryStats">
							<!-- Search-->
							<div class="left widthfull-100per canvasBlockInnerBlock">
								<span class="left marginL10 canvasHeading">Top 50 Queries</span>
							</div>
							<div class="clear"></div>
							<div class="left width96Per marginBottom6 marginL10 marginTop6">
								<div class="searchBlockMasterQS">
									<input type="button" class="searchButtonQS"> <input
										type="text" placeholder="Search Query Definition"
										onkeyup="applyFilterOnQueryStatistics();"
										class="searchBoxQueryStatistics" id="filterQueryStatisticsBox">
								</div>
								<div class="right">
									<select id="columnsSelect" name="columnsSelect"
										multiple="multiple" size="20"></select>
								</div>
							</div>
							<div data-role="widget" data-widgetid="QueryStatistics"
								data-active="yes" data-timeline="30000">
								<div
									class="left widthfull-100per canvasInnerBlock backgroundQueryStats">
									<!--Grid  Block-->
									<div class="gridBlocksPanel left" id="gridBlocks_Panel">
										<div class="left widthfull-100per">
											<table id="queryStatisticsList"></table>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--Middle Block 1-->
		</div>
	</div>
	<!--Popups Block-->
	<div id="boxes">
		<!-- Version Details popup-->
		<!-- Version Details popup-->
		<div id="dialog1" class="window width345" data-role="widget"
			data-widgetid="PulseVersionDetails" data-active="yes"
			data-timeline="5000">
			<div class="popup_heading">
				<span>Version Details</span><a href="#" class="closePopup">&nbsp;</a>
			</div>
			<div class="popup_contentBlock">
				<div class="popup-innerblock">
					<ul class="widthfull-100per left">
						<li class="left widthfull-100per"><label
							class="width-40 display-inline-block">Pulse Version:</label> <label
							class="width-58 display-inline-block" id="pulseVer"></label></li>
						<li class="left widthfull-100per"><label
							class="width-40 display-inline-block">Build Id:</label> <label
							class="width-58 display-inline-block" id="buildId"></label></li>
						<li class="left widthfull-100per"><label
							class="width-40 display-inline-block">Build Date:</label> <label
							class="width-58 display-inline-block" id="buildDate"></label></li>
						<li class="left widthfull-100per"><label
							class="width-40 display-inline-block">Source Date:</label> <label
							class="width-58 display-inline-block" id="sourceDate"></label></li>
						<li class="left widthfull-100per"><label
							class="width-40 display-inline-block">Source Revision:</label>
							<label class="width-58 display-inline-block" id="sourceRevision"></label>
						</li>
						<li class="left widthfull-100per"><label
							class="width-40 display-inline-block">Source
								Repository:</label> <label class="width-58 display-inline-block"
							id="sourceRepository"></label></li>
					</ul>
					<div class="clear"></div>
				</div>
			</div>
		</div>
		<!-- Grid Details popup-->
		<div id="gridPopup" class="window width700">
			<div class="popup_heading">
				<span>Object Explorer</span><a href="#" class="closePopup">&nbsp;</a>
			</div>
			<div class="popup_contentBlock">
				<div class="popup-innerblock">
					<table id="treegrid">
						<tr>
							<td />
						</tr>
					</table>
				</div>
				<div class="popup-innerblock">
					<table id="popUpExplorer">
						<tr>
							<td />
						</tr>
					</table>
				</div>
			</div>
		</div>
		<!-- Mask to cover the whole screen -->
		<div id="mask"></div>
	</div>
	<div id="tooltip" class="tooltip"></div>
	<!-- Placeholder-->
	<script>
    $('input[placeholder], textarea[placeholder]').placeholder();
  </script>

</body>
</html>
